<template>
	<view>

		<view style="text-align: center;">
			<image class="imgbox" src="../../static/login.png"></image>
		</view>
		<view class="loginsbox">
			<view class="wechatapp">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="padding: 0;">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
				<view class="nicknamebox">
					<view>昵称：</view>
					<input type="nickname" class="weui-input" v-model="nickname" @blur="infonickname" placeholder="请输入昵称" />
				</view>
			</view>
		</view>
		<view class="butbox" @click="login()">微信快捷登录</view>
		<view class="tipbox" @click="handletip()">
			<image v-if="tipindex == false" src="../../static/yuan.png"></image>
			<image v-else src="../../static/gou.png"></image>
			<view>请阅读并同意<text style="color: #FF8A9B;" @click.stop="toMenus">《使用条款和隐私政策》</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tipindex: false,
			// 商城基本信息
			// 微信小程序登录凭证 (code)
			// 提交到后端，用于换取openid
			code: '',
			iv: "",
			avatarUrl: '../../static/default-avatar.png',
			nickname: '',
			headpicimg: '',
			myinfo: {},
		}
	},
	methods: {
		toMenus(){
			console.log('to');
			uni.navigateTo({
				url:'/pages/server/server'
			})
		},
		async onChooseAvatar(e) {
			console.log(e, 'e', e.detail)
			const { avatarUrl } = e.detail
			this.avatarUrl = avatarUrl
			// this.headpicimg = avatarUrl
			await this.uploadFile(avatarUrl)
		},
		infonickname(e) {
			console.log(e.detail.value)
			this.nickname = e.detail.value
		},
		uploadFile(filePath) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: uni.baseUrl +
						'api/ajax/upload',
					filePath,
					// action:uploadimage ,
					name: 'file',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data)
						this.headpicimg = JSON.parse(uploadFileRes.data).data.file.full_url
						resolve(JSON.parse(uploadFileRes.data).data.file.full_url || {})
					},
					fail: res => {
						reject('上传失败')
					}
				});
			})

		},
		handletip() {
			this.tipindex = !this.tipindex
		},
		login() {
			if (!this.headpicimg) {
				uni.showToast({
					title: '请点击上传头像',
					icon: 'none'
				})
				return;
			}
			if (!this.nickname) {
				uni.showToast({
					title: '请选择或输入昵称',
					icon: 'none'
				})
				return;
			}
			if (!this.tipindex) {
				uni.showToast({
					title: '请先阅读同意条款及隐私',
					icon: 'none'
				})
				return
			}
			let that = this
			that.avatarUrl = that.headpicimg
			const userInfo = {
				wxName: that.nickname,
				avatarUrl: that.headpicimg
			}
			uni.setStorageSync('userInfo', userInfo)
			uni.login({
				success(res) {
					uni.showLoading({
						title: '请稍后...'
					})
					that.code = res.code
					if (res.code) {
						let param = {
							code: res.code,
							username: that.nickname,
							headpic: that.headpicimg
						}
						let url = '/api/Wechat/wechat_login'
						that.$http({
							url,
							data: param
						}).then(res => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '登录成功'
							})

							uni.setStorageSync('urerinfo', res.data)
							uni.setStorageSync('token', res.data.openid)
							if(uni.getStorageSync('pid')){
								that.$http({
									url:'/api/Wechat/bind_pid',
									data:{
										pid:uni.getStorageSync('pid')
									}
								})
							}
							that.getmyinfo()
							that.mobileShow = true
							console.log(uni.getStorageSync('urerinfo'), 'urerinfo', res.data)
						})
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
			// uni.getUserProfile({
			// 	desc: '用于完善会员资料',
			// 	success: (res) => {

			// 		})
			// 	},
			// 	fail(res) {
			// 		console.log(res)
			// 	}
			// })
		},
		getmyinfo() {
			this.$http({
				url: '/api/Course/user_info',
			}).then(res => {
				console.log(res);
				this.myinfo = res.data

				//identity 1普通用户2志愿者3老师 
				if (this.myinfo.community_id) {
					let { community_name,community_id } = this.myinfo
					uni.setStorageSync('address', {
						name: community_name,
						id: community_id
					})
				} else {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/selectcommunity/selectcommunity'
						})
					}, 100)
					return

				}
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 100)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.avatar-wrapper {
	margin: 50rpx auto;
	width: 130rpx;
	height: 130rpx;
	border-radius: 100%;
	display: flex;
	justify-content: center;

	.avatar {
		width: 130rpx;
		height: 130rpx;
		// border-radius: 100%;
	}
}

.nicknamebox {
	width: 700rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;

	.weui-input {
		width: 500rpx;
	}
}

.loginsbox {
	margin: 0 60rpx;

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.imgbox {
	width: 458rpx;
	height: 168rpx;
	margin: 60rpx auto 0 auto;
}

.butbox {
	width: 690rpx;
	height: 96rpx;
	background: #FF8A9B;
	border-radius: 83rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0 auto;
}

.tipbox {
	width: 690rpx;
	margin: 40rpx auto 0 auto;
	font-size: 28rpx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #555555;
	display: flex;
	align-items: center;

	>text {
		color: #FF6178;
	}

	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
}</style>
